<%--
  Created by IntelliJ IDEA.
  User: 15941
  Date: 2020/3/15
  Time: 18:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" lang="zh">
    <title>酒店住户信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入bootstrap -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- echarts -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="../../static/js/westeros.js"></script>
    <!--vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="/static/js/vue.min.js"></script> -->
    <!-- MDUI -->
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>

    <style media="screen">
        #nav {
            width: 187px;
            height: 875px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
            opacity: 1;
            padding-top: 28px;
            float: left;
        }

        #nav ul {
            list-style: none;
            padding: 0;
        }

        #logo {
            width: 45px;
            height: 26px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 26px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            padding-left: 70px;
            padding-right: 72px;
            padding-bottom: 52px;
        }

        #nav ul li {
            height: 58px;
        }

        #nav img {
            padding-left: 43px;
        }

        #nav a {
            width: 52px;
            height: 16px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 16px;
            color: rgba(158, 173, 197, 1);
            margin-left: 11px;
            line-height: 58px;
            letter-spacing: 3px;
            text-decoration: none;
            opacity: 1;
        }

        #nav ul .usermanage {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: left;
            margin-top: 56px;
            margin-left: 893px;
        }

        .mdui-table-fluid .usertype {
            width: 59px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            text-decoration: none;
            margin-left: 33px;
        }

        table {
            float: left;
        }

        table thead {
            width: 1003px;
            height: 31px;
            background: rgba(244, 247, 251, 1);
            opacity: 1;
            border-radius: 7px;
        }

        table th {
            width: 150px;
            text-align: center;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 31px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
        }

        table td {
            text-align: center;
            width: 24px;
            height: 16px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 40px;
            color: rgba(77, 98, 130, 1);
            opacity: 1;
        }

    </style>

    <script type="text/javascript">
        function display(x) {
            x.style.background = "linear-gradient(90deg,rgba(71,137,255,0.47) 0%,rgba(71,137,255,0.1) 56%,rgba(36,69,128,0) 100%)";
            var name = x.className;
            name = "../../images/index/" + name + "(1).png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function normal(x) {
            x.style.background = "#FFFFFF";
            var name = x.className;
            name = "../../images/index/" + name + ".png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function hover(x) {
            x.style.background="rgba(244,247,251,0.5)";
        }

        function dishover(x) {
            x.style.background="#FFFFFF"
        }
    </script>


</head>

<body style="background:rgba(244,247,251,1);">
<!-- 导航条 -->
<div id="nav">
    <div id="logo">logo</div>
    <ul>
        <li class="usermanage">
            <img class="img" src="../../images/index/usermanage.png"/>
            <a href="/udo/query">用户管理</a>
        </li>
        <li class="hotelmanage" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/hotelmanage.png"/>
            <a href="#">酒店事务</a>
        </li>
        <li class="hotelmoney" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/hotelmoney.png"/>
            <a href="#">酒店财务</a>
        </li>
        <li class="managedata" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/managedata.png"/>
            <a href="#">运营数据</a>
        </li>
        <li class="basesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/basesettings.png"/>
            <a href="#">基础配置</a>
        </li>
        <li class="backstagesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/backstagesettings.png"/>
            <a href="#">后台设置</a>
        </li>
    </ul>
</div>

<!-- 用户 -->
<div id="user">
    <img src="../../images/index/帮助.png"/>
    <img src="../../images/index/通知.png" style="margin-left:36px;"/>
    <img src="../../images/index/图像 2.png"
         style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;"/>
    <img src="../../images/index/路径 1146@2x.png" style="width:7px"/>
</div>

<!--导航栏高度自适应窗口-->
<script type="text/javascript">
    autodivheight();

    function autodivheight() { //函数：获取尺寸
        //获取浏览器窗口高度
        var winHeight = 0;
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测，获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight)
            winHeight = document.documentElement.clientHeight;
        //DIV高度为浏览器窗口的高度
        document.getElementById("nav").style.height = winHeight + "px";

    }

    window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度
</script>

<!--用户表单-->
<div class="mdui-table-fluid"
     style="float:left;width:1017px;margin-left: 38px;margin-right: 38px;margin-top:18px;padding-top:28px;padding-left:5px;padding-right:5px;background: #FFFFFF;border-radius: 10px">
    <!--    用户类型切换-->
    <div>
        <a href="#" class="usertype" style="color: #4F4F4F">全部用户
        </a>
        <a href="#" class="usertype">VIP用户</a>
        <a href="#" class="usertype">处理中</a>
    </div>
    <!--    查询框-->
    <div style="float:left;margin-left:30px;margin-top:35px;margin-right:600px;padding-right:2px;width:206px;height:32px;border:1px solid rgba(228,228,228,1);opacity:1;border-radius:16px;">
        <img src="../../images/user/search.png"
             style="width: 16px;margin-left: 10px;float: left;margin-top:8px;margin-right: 3px;"/>
        <input type="text" value="输入关键词" onclick="clearvalue(this)" onblur="defaultvalue(this)"
               style="height: 30px;width: 120px;border: none;outline: none;color: #E4E4E4;padding: 0px;">
        <a href="#"
           style="float:right;margin-top:2px;width:41px;height:26px;background:rgba(239,240,245,1);opacity:1;border-radius:18px;">
            <img src="../../images/index/backstagesettings(1).png"
                 style="width: 16px;margin-left: 13px;margin-top:4px;"/>
        </a>
    </div>
    <script>
        function clearvalue(x) {
            x.value = "";
        }

        function defaultvalue(x) {
            if (x.value == "") {
                x.value = "请输入关键词";
            }
        }
    </script>

    <!--    用户添加-->
    <a class="mdui-btn mdui-btn-raised mdui-ripple mdui-text-color-white-text" href="#"
       style="float:right;margin-top:31px;margin-bottom:33px;margin-right:32px;width:112px;height:36px;background:rgba(71,137,255,1);opacity:1;border-radius:18px;text-decoration: none;">
        <i class="mdui-icon material-icons mdui-icon-left ">&#xe145;</i>
        <div style="width:48px;height:16px;font-size:12px;font-family:Microsoft YaHei;font-weight:400;line-height:16px;color:rgba(255,255,255,1);opacity:1;margin-top: 10px;">
            添加用户
        </div>
    </a>


    <table id="table">
        <thead>
        <tr>
            <th>姓名</th>
            <th>房间号</th>
            <th>订单状态</th>
            <th>订单内容</th>
            <th>智控权限</th>
            <th>交易时间</th>
            <th>实际支付</th>
        </tr>
        </thead>
        <tbody>
        <tr onmouseover="hover(this);" onmouseout="dishover(this);">
            <td>wss</td>
            <td>2020</td>
            <td>
                <img src="../../images/user/ok.png" style="width: 57px"/>
            </td>
            <td>豪华大床房</td>
            <td>授权</td>
            <td>3-10 21：24</td>
            <td>￥269</td>
        </tr>
        <tr onmouseover="hover(this);" onmouseout="dishover(this);">
            <td>wss</td>
            <td>2020</td>
            <td>
                <img src="../../images/user/wait.png" style="width: 57px"/>
            </td>
            <td>豪华大床房</td>
            <td>授权</td>
            <td>3-10 21：24</td>
            <td>￥269</td>
        </tr>
        <tr onmouseover="hover(this);" onmouseout="dishover(this);">
            <td>wss</td>
            <td>2020</td>
            <td>
                <img src="../../images/user/success.png" style="width: 57px"/>
            </td>
            <td>豪华大床房</td>
            <td>授权</td>
            <td>3-10 21：24</td>
            <td>￥269</td>
        </tr>
        <tr onmouseover="hover(this);" onmouseout="dishover(this);">
            <td>wss</td>
            <td>2020</td>
            <td>
                <img src="../../images/user/ing.png" style="width: 57px"/>
            </td>
            <td>豪华大床房</td>
            <td>授权</td>
            <td>3-10 21：24</td>
            <td>￥269</td>
        </tr>
        <% for(int i =0;i<10;i++){%>
        <tr onmouseover="hover(this);" onmouseout="dishover(this);">
            <td>wss</td>
            <td>2020</td>
            <td>
                <img src="../../images/user/ing.png" style="width: 57px"/>
            </td>
            <td>豪华大床房</td>
            <td>授权</td>
            <td>3-10 21：24</td>
            <td>￥269</td>
        </tr>
        <%}%>
        </tbody>
    </table>
</div>
<script src="//www.mdui.org/source/dist/js/mdui.min.js"></script>
</body>
